<template>
  <view class="order-container">
    <view class="sheet-mask" v-if="showPay" @click.self="closePay">
      <view class="sheet">
        <view class="sheet-header">
          <text>支付方式</text>
          <text class="close" @click="closePay">×</text>
        </view>
        <view class="pay-item" @click="select('wechat')">
          <image class="icon" src="/static/wechat.png" mode="aspectFit" />
          <text class="label">微信支付</text>
          <view class="check" :class="{on: payType==='wechat'}"></view>
        </view>
        <view class="pay-item" @click="select('alipay')">
          <image class="icon" src="/static/alipay.png" mode="aspectFit" />
          <text class="label">支付宝支付</text>
          <view class="check" :class="{on: payType==='alipay'}"></view>
        </view>
        <view class="footer">
          <view class="price"><text class="n">价格：480元</text><text class="o">原价：9980元</text></view>
          <button class="pay-btn" @click="payNow">立即支付</button>
        </view>
      </view>
    </view>
    <view class="content">
      <button class="open-pay" @click="openPay">打开支付弹窗</button>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return { showPay: true, payType: 'wechat' }
  },
  methods:{
    openPay(){ this.showPay=true },
    closePay(){ this.showPay=false },
    select(t){ this.payType=t },
    payNow(){
      uni.showToast({ title: '调用支付 ' + this.payType, icon:'none' })
    }
  }
}
</script>

<style scoped>
.order-container{min-height:100vh;background:#f7f7f7}
.content{padding:40rpx}
.open-pay{background:#ff3a2f;color:#fff;border-radius:12rpx;height:88rpx;line-height:88rpx}
.sheet-mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet{width:100%;background:#fff;border-top-left-radius:16rpx;border-top-right-radius:16rpx;padding:20rpx 24rpx}
.sheet-header{display:flex;align-items:center;justify-content:space-between;font-size:30rpx;color:#333;margin-bottom:10rpx}
.sheet-header .close{font-size:36rpx;color:#999}
.pay-item{display:flex;align-items:center;padding:20rpx 0;border-bottom:1rpx solid #f0f0f0}
.pay-item .icon{width:44rpx;height:44rpx;margin-right:16rpx}
.pay-item .label{flex:1;font-size:28rpx;color:#333}
.pay-item .check{width:32rpx;height:32rpx;border-radius:16rpx;border:2rpx solid #ccc}
.pay-item .check.on{background:#3CC51F;border-color:#3CC51F}
.footer{display:flex;align-items:center;justify-content:space-between;margin-top:20rpx}
.price .n{color:#ff3a2f;font-size:28rpx;margin-right:16rpx}
.price .o{color:#bbb;font-size:22rpx;text-decoration:line-through}
.pay-btn{background:#ff3a2f;color:#fff;border-radius:10rpx;height:80rpx;line-height:80rpx;padding:0 28rpx}
</style>


